<template>
  <div style="height: 100%;background-color: #232733;  border-radius: 10px;" ref="chart"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { seller } from '../utils/api';
let chart = ref(null);
var myChart = null

let option = {
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    , inverse: true,
  },
  xAxis: {
    type: 'value'

  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {

        // 使用渐变色填充
        color: new echarts.graphic.LinearGradient(
          0, 0, 1, 0, // 0, 0, 0, 1 分别代表右、下、左、上，这里表示从上到下的渐变
          [
            { offset: 0, color: 'darkblue' }, // 0% 处的颜色为红色
            { offset: 1, color: 'violet' } // 100% 处的颜色为天蓝色
          ]
        )
        ,
        borderRadius: [0, 5, 5, 0] // 圆角
      }
    }
  ]
}
const getseller = () => {
  seller().then(res => {
    console.log(res)
    option.yAxis.data = res.sort((a, b) => b.value - a.value).map(item => item.name)
    console.log(res.map(item => item.value));
    option.series[0].data = res.sort((a, b) => b.value - a.value).map(item => item.value)
    myChart.setOption(option);
  })
}

getseller();
onMounted(() => {
  myChart = echarts.init(chart.value);
  myChart.setOption(option);
});
</script>
